Granular Chunks

「Granular」は「粒状の」

commons chunkを小さくしようぜ的な

Next.js v9.2から入ったchunk分割の手法

これは Google の Chrome チームによる研究に基づいたより効率的な chunk splitting の方法で，以下のような戦略からなります:

160KB以上の外部packageは個別のchunk に分ける

react、react-domなどのframeworkごとに1つのchunkに分ける

過不足なくなるぐらいのchunkを必要な分だけ切り出す

As many shared chunks as needed are created (up to 25)

従来のSplitChunksPluginとかは、commonsがデカかったが、commonsを分割したということかなmrsekut.icon

SplitChunksPluginでは、「project全体の50%以上で使っているならcommonsに突っ込む」みたいな方針

chunkの最小サイズは20kb

まずvendor.jsというのが何かわからん #??

Webpack v4で入った

複数のentrypointで重複したコードをfetchしないようにchunkを分割する

しかし、多くのframeworkはsingle-commons的なアプローチになっている

next.jsのcommonsにはreact, react-domなど50%以上のページで使われるものが突っ込まれている

初回にどのページを見てもこのcommonsがfetchされる

トレードオフ

比率を下げると、多くのページで不要なコードをfetchすることになる

例えば全ページの20%で使われるコードをcommonsとする

50%の時よりはcommonsのサイズは大きくなるはずmrsekut.icon

比率を上げると, more code gets duplicated across multiple routes.

例えば前ページの80%で使われるコードのみをcommonsとする

50%の時よりはcommonsのサイズは小さくなるはずmrsekut.icon

こっちの言っている意味がわからん #??

比率ってなんの？

50%のこと

こんな感じ？

https://gyazo.com/a3a0b835b1cbdcae11a0e0803cb8cf2c

20%にすると、commonsに含まれるAが必要無いのにfetchするページが増える

80%にすると、Aが必要無いのにfetchするページは減る

が、B(青)も多くのページで共通しているのに、commonsに含まれないことになる

Granular Chunks

https://gyazo.com/f4c88194bc80d3a7269153c033d90cc0